<div id="network-supply-custom-bar5" style="height: 100%">

</div>

<script type="text/javascript">
    $(function () {
        loadbar5("","");
        $("select#prjId").change(function(){
            document.getElementById("loading").style.display="";
            setoption5();
            loadbar5($("#prjId").val(),"");
        });
        $("select#primarySales1").change(function(){
            document.getElementById("loading").style.display="";
            loadbar5($("#prjId").val(),$("#primarySales1").val());
        });
    });
    function setoption5() {
        var center=$("#prjId").val();
        $.ajax({
            url: "#springUrl('/network/supply/custom/option2')",
            data: {"center": center},
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    $("#primarySales1").empty();
                    var options2="<option value=''>"+"请选择销售渠道"+"</option>";;
                    $("#primarySales1").append(options2);
                    for(var i=0;i<d.data.option2.length;i++){
                        var primarySales=d.data.option2[i].primarySales;
                        var options="<option value='"+primarySales+"'>"+primarySales+"</option>";
                        $("#primarySales1").append(options);
                    }
                }
            }
        })
    }
    function initbarFive(myChart) {
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#998492'
                    }
                },

            },
            grid: {
                left: '3%',
                right: '8%',
                bottom: '15%',
                top:'10%',
                containLabel: true
            },
            title: {
                text: '不同订单类型的订单总数量',
                subtext: '纯属虚构',
                top: 10,
                left: 10,
                show:false
            },
            xAxis: [
                {
                    type: 'category',
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate:45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '订单量',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                },
                {
                    type: 'value',
                    name: '订货频次',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:false
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            series: [
                {
                    name:'订单量',
                    type:'bar',
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#0fa99d','#d9d9d9','#787473','#c9eee7','#e7a14c',
                                    '#4472c4','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },
                            //以下为是否显示，显示位置和显示格式的设置了
                        }},
                    barWidth:20,},
                {
                    name:'频次',
                    type:'line',
                    yAxisIndex: 1,

                }
                ]
        })
    }
    function loadbar5(center,primarySales) {
        var myChart = echarts.init(document.getElementById('network-supply-custom-bar5'), 'macarons');
        initbarFive(myChart);
        $.ajax({
            url: "#springUrl('/network/supply/custom/bar5')",
            data: {"center": center,"primarySales":primarySales},
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    var option = myChart.getOption();
                    option.xAxis = [
                        {
                            data: d.data.data1,
                        }
                    ];
                    option.series[0].data = d.data.data2;
                    option.series[1].data = d.data.data3;
                     myChart.setOption(option);


                    document.getElementById("loading").style.display="none";

                /*    myChart.on('click',function(object){
                // 销毁之前的echarts实例
                echarts.dispose(document.getElementById("network-supply-custom-bar5"));
                // 初始化一个新的实例
                 var myChart = echarts.init(document.getElementById("network-supply-custom-bar5"));
                    $.ajax({
                        url: "#springUrl('/network/supply/custom/bar51')",
                        data: {"center": center, "primarySales": primarySales,"months":object.name},
                        type: "POST",
                        success: function (text) {
                            var d = JSON.parse(text);
                            if (d.success && d.data) {
                                option1 = {
                                    color: ['#3398DB'],
                                    tooltip : {
                                        trigger: 'axis',
                                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                        }
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    xAxis : [
                                        {
                                            type : 'category',
                                            data : d.data.data1,
                                            axisTick: {
                                                alignWithLabel: true
                                            }
                                        }
                                    ],
                                    yAxis : [
                                        {
                                            type : 'value'
                                        }
                                    ],
                                    series : [
                                        {
                                            name:'直接访问',
                                            type:'bar',
                                            barWidth: '60%',
                                            data:d.data.data2,
                                        }
                                    ]
                                };

                                myChart.setOption(option1, true);
                            }
                        },

                    });

                    });*/

                }else{
                    document.getElementById("loading").style.display="none";
                    var div1="<div type='text' style='padding-top:15%' class=' text-center '>"+d.message+"</div>";
                    $("#network-supply-custom-bar5").empty();
                    $("#network-supply-custom-bar5").prepend(div1);
                }
            }
        });


                    $('#return-button').on('click',function(){
                        var myChart = echarts.init(document.getElementById("network-supply-custom-bar5"));
                        var center=$("#prjId").val();
                        var primarySales=$("#primarySales1").val();
                        $.ajax({
                            url: "#springUrl('/network/supply/custom/bar5')",
                            data: {"center": center, "primarySales": primarySales},
                            type: "POST",
                            success: function (text) {
                                var d = JSON.parse(text);
                                if (d.success && d.data) {
                                    option2 = {
                                        tooltip: {
                                            trigger: 'axis',
                                            axisPointer: {
                                                type: 'cross',
                                                crossStyle: {
                                                    color: '#998492'
                                                }
                                            },

                                        },
                                        grid:{
                                            x:45,
                                            y:40,
                                            x2:50,
                                            y2:40, borderWidth:10
                                        },
                                        title: {
                                            text: '不同订单类型的订单总数量',
                                            subtext: '纯属虚构',
                                            top: 10,
                                            left: 10,
                                            show:false
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: d.data.data1,
                                                axisPointer: {
                                                    type: 'shadow'
                                                },
                                                axisLabel:{
                                                    show:false
                                                }
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value',
                                                name: '订单量',
                                                axisLabel: {
                                                    //formatter: '{value} 件'
                                                },
                                                splitLine:{
                                                    show:false
                                                },
                                                splitArea: {
                                                    show: true,
                                                    areaStyle: {
                                                        color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                                                    }
                                                },
                                            },
                                            {
                                                type: 'value',
                                                name: '订货频次',
                                                axisLabel: {
                                                    //  formatter: '{value} 次'
                                                },
                                                splitLine:{
                                                    show:false
                                                },
                                                splitArea: {
                                                    show: true,
                                                    areaStyle: {
                                                        color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                                                    }
                                                },
                                            }
                                        ],
                                        series: [
                                            {
                                                name:'订单量',
                                                type:'bar',
                                                data:d.data.data2,
                                                itemStyle: {
                                                    normal: {
                                                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                                        color: function(params) {
                                                            // build a color map as your need.
                                                            var colorList = [
                                                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                                            ];
                                                            return colorList[params.dataIndex]
                                                        },
                                                        //以下为是否显示，显示位置和显示格式的设置了
                                                    }}},
                                            {
                                                name:'频次',
                                                type:'line',
                                                yAxisIndex: 1,
                                                data:d.data.data3
                                            }
                                        ]
                                    };
                                    myChart.setOption(option2);
                                    myChart.on('click',function(object){
                                        $.ajax({
                                            url: "#springUrl('/network/supply/custom/bar51')",
                                            data: {"center": center, "primarySales": primarySales,"months":object.name},
                                            type: "POST",
                                            success: function (text) {
                                                var d = JSON.parse(text);
                                                if (d.success && d.data) {
                                                    option3 = {
                                                        color: ['#3398DB'],
                                                        tooltip : {
                                                            trigger: 'axis',
                                                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                                            }
                                                        },
                                                        grid: {
                                                            left: '3%',
                                                            right: '4%',
                                                            bottom: '3%',
                                                            containLabel: true
                                                        },
                                                        xAxis : [
                                                            {
                                                                type : 'category',
                                                                data : d.data.data1,
                                                                axisTick: {
                                                                    alignWithLabel: true
                                                                }
                                                            }
                                                        ],
                                                        yAxis : [
                                                            {
                                                                type : 'value'
                                                            }
                                                        ],
                                                        series : [
                                                            {
                                                                name:'直接访问',
                                                                type:'bar',
                                                                barWidth: '60%',
                                                                data:d.data.data2,
                                                            }
                                                        ]
                                                    };

                                                    myChart.setOption(option3, true);
                                                }
                                            },

                                        });
                                    });
                                }
                            }
                        })


                    });

    }




</script>